<template>
  <div style="display: inline-block;">
    <el-tag v-if="flagVal === 0 && defaultName" class="tag_class" type="info">{{ defaultName }}</el-tag>
    <template v-for="item in options">
      <el-tag v-if="hasFlag(item.value)" :type="item.tagType ? item.tagType : 'info'" class="tag_class">{{ item.label }}</el-tag>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { DictItem } from '@/utils/global-dict.ts';

defineOptions({name: 'MultipleTag'})

const props = defineProps({
  flagVal: {
    type: Number,
    default: 0,
    required: true
  },
  options: {
    type: Array as PropType<DictItem[]>,
    default: () => [],
  },
  defaultName: {
    type: String,
    default: '默认'
  },
});

const hasFlag = (flag: any) => {
  return (props.flagVal & flag) === flag;
};

</script>

<style lang="scss" scoped>
.tag_class {
  text-align: center
}
</style>
